<template>
  <div class="containContainer">
    <div class="headerContainer" style="display: flex;flex-direction: row">
      <div class="headerLeafContainer" style="width: 90%;padding-right: 15px">
        <div class="titleContainer" style="display: flex;flex-direction: row;height: 70px;">
          <span class="title" style="border-bottom: #cccccc 1px solid; line-height: 70px; height: 70px">标题</span>
          <el-input type="text" v-model="form.title" placeholder="请输入标题" id="titleInput"></el-input>
        </div>
        <div class="authorContainer" style="display: flex;flex-direction: row;height: 50px">
          <span class="author">作者</span>
          <el-input type="text" v-model="form.author" placeholder="请输入作者" id="authorInput"></el-input>
        </div>
      </div>
      <!--      按钮区域-->
      <div class="headerRightContainer" style="width: 10%;flex-direction: column;">
        <div style="margin-top: 15px">
          <el-button type="primary" size="normal" style="width: 80%" @click="release()">发布</el-button>
        </div>
        <div style="margin-top: 15px">
          <el-button type="success" size="normal" style="width: 80%" @click="updateNews()">更新</el-button>
        </div>
      </div>
    </div>

    <div class="contentContainer">
      <!--富文本区域-->
      <div id="div1">

      </div>
    </div>
  </div>
</template>

<script>
/*导入富文本*/
import E from 'wangeditor'
import request from "@/utils/request";

let editor;

export default {
  name: "NewsRelease",
  data() {
    return {
      form: {
        title: '',
        author: '',
        content: '',
      },
    }
  },
  /*页面加载时执行钩子函数*/
  created() {
    /*/!*解决异步加载执行，不能创建问题*!/
    this.$nextTick(() => {
      editor.create();
    })*/
  },

  mounted() {
    editor = new E('#div1')
    editor.config.height = 500  /*设置富文本编辑区域高度，先设置在创建*/
    // 配置 server 接口地址
    editor.config.uploadImgServer = '/api/files/upload'
    editor.config.uploadImgMaxSize = 10 * 1024 * 1024 // 2M
    editor.config.uploadImgMaxLength = 5 // 一次最多上传 5 个图片
    editor.create();
    /*修改*/
    this.displayNews()
  },

  methods: {
    /*发布*/
    release() {
      /*绑定内容区域给form*/
      this.form.content = editor.txt.html();
      this.form.nick_name = JSON.parse(sessionStorage.getItem("user")).nick_name
      /*后端存储数据*/
      request.post("/api/news/save", this.form).then((res) => {
        if (res.code === "0") {
          this.$message({  //element-ui提供的弹窗信息
            type: "success",
            message: "发布成功"
          })
          let form = JSON.stringify(this.form); /*编译成JSON格式，用来传递*/
          this.$router.push("/main/News");
        } else {
          this.$message({  //element-ui提供的弹窗信息
            type: "error",
            message: "发布失败"
          })
        }
      });
    },

    displayNews(){
      this.form = this.$route.query;
      editor.txt.html(this.form.content);//设置富文本内容
    },

    updateNews() {
      this.form.content=editor.txt.html();
      request.put("/api/news/update",this.form).then((res)=>{
        if (res.code === "0") {
          this.$message({  //element-ui提供的弹窗信息
            type: "success",
            message: "更新成功"
          })
          let form = JSON.stringify(this.form); /*编译成JSON格式，用来传递*/
          this.$router.push("/main/News");
        } else {
          this.$message({  //element-ui提供的弹窗信息
            type: "error",
            message: "更新失败"
          })
        }
      });
    },
  }

}
</script>


<style scoped>
.containContainer {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
}


.contentContainer {
  height: 100%;
  width: 100%;
}

.title {
  color: #2e2e2e;
  font-size: 30px;
  font-weight: bolder;
  font-family: 黑体;
  line-height: 60px;
  padding-left: 10px;
  width: 80px;
}


.author {
  color: #2e2e2e;
  font-size: 25px;
  font-weight: bolder;
  font-family: 黑体;
  line-height: 60px;
  padding-left: 10px;
  width: 80px;
}

>>> #titleInput {
  height: 70px;
  border-radius: 0;
  font-size: 25px;
  padding: 2px;
}

>>> #authorInput {
  height: 50px;
  border-radius: 0;
  font-size: 25px;
  padding: 2px;
}


/*!*重写输入框样式*!
>>>.el-input--small .el-input__inner{
  height: 60px;
  border-radius: 0;
  font-size:25px;
  padding: 2px;
}*/

</style>


